<template>
  <view class="cont">
    <div class="img">
      <image :src="this.$store.state.imgBaseUrl + '/pay_fail.png'"></image>
    </div>
    <view class="text1">支付失败</view>
    <view class="text2">
      您以当前取消了支付或网络问题不稳定导致付款失败，
    </view>
    <view class="text2">
      请重新发起支付或上传您的付款凭证。
    </view>
    <view class="footer">
      <!-- 身份和资质认证完成后展示 -->
      <button type="primary" class="sub-btn yellow miniBtn" plain="true" @click="gotoPage">上传凭证</button>
      <button type="primary" class="miniBtn block" plain="true" @click="topPay">线上支付</button>
    </view>
  </view>
</template>
<script>
import { payAgain } from "@/service/join/join.service.js"
export default {
  data() {
    return {
      type: '', // 加盟类型
      allInfo: null
    };
  },
  onLoad(option) {
    this.type = option.type
  },
  onShow() {
    const datas = uni.getStorageSync('recomposeDatas');
    if (datas) {
      this.allInfo = datas;
    }
  },
  methods: {
    gotoPage () {
      uni.navigateTo({
        url: '/pages/upgrade/updateCertificate'
      })
    },
    topPay () {
      // 支付失败后的上传
      let params = {
        id: this.allInfo.joinId,
        rank: this.allInfo.rank, // 加盟等级
        appliedType: 2, // 申请类型(1名额添加，2付费加盟，3代上传)
        onlinePay: 1
      }
      // upgrade(params, (res) => {
      //   if (res.status == 0) {
      //     uni.showToast({
      //       title: '提交成功',
      //       icon: 'none'
      //     });
      //     uni.removeStorage({ // 清除缓存
      //       key: 'gradeUserInfo',
      //       success: function () {
      //         // 打开支付页面
      //         location.href = res.data.onlinePayUrl;
      //       }
      //     });
      //   } else {
      //     uni.showToast({
      //       title: res.msg,
      //       icon: 'none'
      //     });
      //   }
      // })
      
      payAgain(params, res => {
        if (res.status == 0) {
          uni.showToast({
            title: '提交成功',
            icon: 'none'
          });
          uni.removeStorage({ // 清楚缓存
            key: 'recomposeDatas',
            success: function () {
              // 打开支付
              location.href = res.data.onlinePayUrl;
            }
          });
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      })
    }
  }
}
</script>

<style lang="scss">
.cont {
  height: 100vh;
  background-color: #FFFFFF;
  .img {
    width: 306rpx;
    height: 306rpx;
    padding-top: 167rpx;
    margin: 0 auto;
    image {
     width: 306rpx;
     height: 306rpx;
    }
  }
  .text1 {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(67,67,67,1);
    text-align: center;
    margin-bottom: 60rpx;
    margin-top: 35rpx;
  }
  .text2 {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(153,153,153,1);
    text-align: center;
    line-height: 49rpx;
  }
  .footer {
    width: 100%;
    border-top: 1px solid #E1E1E1;
    padding: 14rpx 0 20rpx;
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 0;
    left: 0;
    button {
      height: 70rpx;
      margin: 0 32rpx;
      line-height: 70rpx;
      font-size: 30rpx;
      border: none;
      &.sub-btn {
        width: 100%;
      }
      &.miniBtn {
        width: 320rpx;
      }
      &.yellow {
        color: #434343;
        background-color: #F6DA99;
      }
      &.block {
        background-color: #434343;
        color: #F6DA99;
      }
    }
  }
}
</style>
